<template>
	<view class="container">
		<view class="banner">
			<view class="member-number">
				<view class="">No.{{userInfo.number}}</view>
				<view class="">明细</view>
			</view>
			<view style="margin-top: 10rpx;">账户余额</view>
			<!-- <view class="member-price">￥{{userInfo.balance.toFixed(2)}}</view> -->
			<view class="member-bottom">
				<view class="member-price">￥{{userInfo.balance.toFixed(2)}}</view>
				<view style="font-size: 24rpx;">
					<view>充值本金￥{{userInfo.rechargeBalance }}</view>
					<view>商家赠送￥{{userInfo.giftBalance}}</view>
				</view>
			</view>
		</view>

		<!-- 显示 -->
		<view class="content">
				<u-tabs :list="tabList" :activeStyle="{color:'#f1be5d'}" lineColor="#f1be5d" :current="type" @click="onCheckType"></u-tabs>
			

				<scroll-view v-if="recordList.length > 0" scroll-y style="height: 90%;padding: 20rpx;">
					<view class="record-info" v-for="item in recordList" :key="item.id">
						
						<view class="left">
							<!-- <view class="trade-type">{{item.paymentTypeName}}</view> -->
							<view class="trade-type"><u-icon name="order" size="18px" :label="item.paymentTypeName" ></u-icon></view>
							<view class="time">{{item.createTime}}</view>
						</view>
						
						<view class="right">
							<!-- <view class="trade-type"></view> -->
							<view class="gift-amount" v-if="item.type === 3">赠送金额￥{{item.giftAmount}}</view>
							<view class="amount"><text style="font-size: 24rpx;">{{item.typeName}}</text>{{item.type === 1 ? "-" : "+"}}{{item.money}}</view>
						</view>
						
					</view>
				</scroll-view>
			
			<view class="none" v-else>
				<image src="../../../static/images/order/default_img_order.png"  style="height: 300rpx;height: 400rpx;"></image>
				<view style="text-align: center;font-size: 30rpx;">暂无数据</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				recordList: [],
				userInfo: {
					balance:0
				},
				tabList: [{
					name: '全部',
					value:0
				}, {
					name: '消费',
					value:1
				}, {
					name: '退款',
					value:2
				}, {
					name: '充值',
					value:3
				}] // 0,1,2,3
			}
		},
		onLoad() {
			this.getRecordList()
		},
		onShow() {

		},
		methods: {
			async getRecordList() {
				const res = await this.$api.getRecordList({
					type: this.type
				})
				this.userInfo = res.otherData
				this.recordList = res.data || []
				// console.log(res);
			},
			// 选中type
			onCheckType({index}) {
				if(this.type === index) return
				this.type = index
				// console.log(this.type);
				this.getRecordList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;

		.banner {
			padding: 30rpx;
			margin-top: 30rpx;
			background-color: #383838;
			height: 260rpx;
			border-radius: 10rpx;
			box-shadow: 5rpx 5rpx 5rpx #8c8c8c;
			color: #e5cd9b;

			.member-number {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.member-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				.member-price {
				font-size: 50rpx;
			}
			}
			// .member-price {
			// 	margin-top: 30rpx;
			// 	font-size: 50rpx;
			// }
		}

		.content {
			display: flex;
			flex-direction: column;
			height: calc(100% - 290rpx);
			padding-top: 20rpx;
			background-color: #fff;
			.record-info { // 每一项数据
				padding: 0 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 150rpx;
				border: 1px solid #ededed;
				margin-top: 10rpx;
				.time {
					margin-top: 5rpx;
					color: #c9c9c9;
					font-size: 25rpx;
				}
				.trade-type {
					font-size: 32rpx;
				}
				.right {
					text-align: right;
					.gift-amount {
					color: #c12d2b;
					font-size: 25rpx;
				}
				.amount {
					font-size: 35rpx;
				}
				}
				
			}
			.none {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
</style>